<style lang='stylus'>
page {
  height: 100%;
}

.header {
  width: 100%;
}

.scroller {
  width: 100%;
  overflow: hidden;
}
</style>
<template>
  <view class="content flex flex-column dlc-bg">
    <view class="scroller flex1">
		<!-- scroll-y允许纵向滚动 
		upper-threshold：距顶部/左边多远时，触发 scrolltoupper 事件-->
      <scroll-view
        class="scroll-view"
        scroll-y
		@scrolltoupper="refreshState"
		upper-threshold="50"
        :style="{height:scrollerObj.height + 'px'}"
        @scrolltolower="scrolltolower"
        :lower-threshold="scrollerObj.lowerThreshold"
        :scroll-top="topLocal"
      >
        <view class="pd20 mg30-x mgt30 bgw radius-8 ft26" v-for="order in list" :key="order.orderNo">
          <navigator hover-class="none" :url="'/pagesA/order/detail?orderId='+ order.orderId">
            <view class="item-header flex flex-between border-bottom pdb20">
              <text class="ft28" style="color:#000">订单号:{{order.outTradeNo}}</text>
            </view>

            <view class="item-body pdt20">
              <view class="cell flex flex-between mgb12">
                <view >
                  <text class="dlc-gray">订单状态</text>
                </view>
                <view >
                  <text
                    :class="order.payStatus == 1?'dlc-danger'
                     :order.payStatus ==2?'dlc-success'
                     :order.payStatus ==3?'dlc-success'
                     :order.payStatus ==4?'dlc-success'
                     :order.payStatus ==5?'dlc-warning'
                     :'dlc-success'"
                  >
                    {{order.payStatus==1?"待充电"
                    :order.payStatus==2?"充电失败"
                    :order.payStatus==3?"进行中"
                    :order.payStatus==4?"待支付"
                    :order.payStatus==5?"已支付"
                    :order.payStatus==6?"不计费"
                    :order.payStatus==7?"退款"
					:order.payStatus==8?"充电柜充电结束":"未知"}}
                  </text>
                </view>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">订单类型</text>
                <text>{{order.orderType==1?"按次数收费":"按时收费"}}</text>
              </view>

              <!-- <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">订单时长:</text>
                <text>{{order.timeQuantum}}</text>
              </view>-->

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">使用时长</text>
                <text>{{order.useTimeQuantum}}</text>
              </view>

              <view class="cell flex flex-between mgb12" v-if="order.payType==4">
                <text class="dlc-gray">卡号:</text>
                <text>{{order.cardNo}}</text>
              </view>

              <view v-if="order.payType!=4" class="cell flex flex-between mgb12">
                <text class="dlc-gray">支付金额</text>
                <text v-if="order.payStatus==6">-</text>
                <text v-else>{{order.orderAmount/100}}元</text>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">支付类型</text>
                <text>
                  {{order.payType==1?"微信":
                  order.payType==2?"支付宝":
                  order.payType==3?"余额":
                  order.payType==4?"月卡":
                  order.payType==5?"IC卡":
                  order.payType==6? "线下":
                  "-"}}
                </text>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">充电桩编号</text>
                <text>{{order.equipmentNumber}}</text>
              </view>
              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">使用充电桩端口号</text>
                <text>{{order.mouthNoShow}}号口</text>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">充电开始时间</text>
                <text>{{order.ctime}}</text>
              </view>

              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">充电结束时间</text>
                <text>{{order.etime}}</text>
              </view>
              <view
                class="cell flex flex-between mgb12"
                v-if="order.payStatus==4||order.payStatus==5||order.payStatus==8"
              >
                <text class="dlc-gray">当前状态</text>
                <text>
                {{
                  order.endReason==null?"-"
                  :order.endReason==0?"充电结束"
                  :order.endReason==1?"充电结束"
                  :order.endReason==2?"充电结束" 
                  :order.endReason==3?"异常结束（电池超过设备额定功率）"
                  :order.endReason==4?"异常结束"
                  :order.endReason==5?"异常结束"
                  :order.endReason==6?"异常结束"
                  :order.endReason==7?"异常结束"
                  :order.endReason==8?"异常结束"
                  :order.endReason==9?"异常结束"
                  :order.endReason==10?"异常结束"
                  :order.endReason==11?"充电结束"
                  :order.endReason==12?"异常结束"
                  :order.endReason==13?"异常结束"
                  :order.endReason==14?"异常结束"
                  :order.endReason==15?"异常结束"
                  :order.endReason==16?"异常结束"
                  :order.endReason==17?"充电结束"
				  :order.endReason==18?"门超时未关"
				  :order.endReason==19?"门异常，请联系客服"
                  :"-"}}
                </text>
              </view>

              <!-- <view v-if="order.payStatus==6||order.payStatus==7||order.payStatus==8">
                <view class="cell flex flex-between mgb12" v-if="order.orderRefundAmoun!=0">
                  <text class="dlc-gray">退款金额:</text>
                  <text>{{(order.orderRefundAmount+order.orderRefundGivenAmount)/100}}元</text>
                </view>
                <view
                  class="cell flex flex-between mgb12"
                  v-if="order.orderRefundAmount+order.orderRefundGivenAmount!==0"
                >
                  <text class="dlc-gray">退款原因:</text>
                  <text>{{order.orderRefundReason==null?"-":order.orderRefundReason}}</text>
                </view>
              </view>-->
            </view>
          </navigator>
        </view>
        <i-load-more
          v-if="scrollerObj.loading || scrollerObj.isEnd"
          :tip="loadingTip"
          :loading="scrollerObj.loading"
        />
      </scroll-view>
    </view>
    <i-message id="message" />
  </view>
</template>

<script>
import { getFrontOrderList } from "@/api";
import { parseTime, getdTime } from "@/utils";
import LoadMore from "@/mixins/LoadMore";
import store from "@/store";
const { $Message } = require("@/wxcomponents/iview/base/index");
export default {
  // mixins: [LoadMore],
  data() {
    return {
      isTop: false,
      query: {
        offset: 1,
        limist: 10
      },
      scrollerObj: {						//可滚动视图区域对象
        height: 0,							//可滚动视图区域的高度
        lowerThreshold: 100,				//可滚动视图区域到达底部多远触发scrolltolower事件
        isEnd: false,						//是否到达底部位置
        loading: false						//
      },
      list: [],
      topLocal:0
      
    };
  },
  methods: {
	  // 获取订单数据函数
    async fetchData() {
      //调用服务器接口     
      // 订单列表
      const { data } = await getFrontOrderList({
       ...this.query
      });
      if (data.code === 1) {
        this.pages = data.data.pages;
        let { records, total } = data.data;

        records = records.map((item, index) => {
          return {
            ...item,
            ctime:item.ctime == null? "-":item.ctime.slice(0, 19),				//ctime:充电开始时间
            etime:item.etime == null? "-":item.etime.slice(0, 19),				//etime:充电结束时间
            useTimeQuantum:
              item.useTimeQuantum == 0?"-":getdTime(item.useTimeQuantum),		//useTimeQuantum: 使用时长
          };
        });
        if(this.query.offset==1){
        this.list=records
        }else{
         this.list = this.list.concat(records);
        }

         this.scrollerObj.loading = false;
        let len = this.list.length;

        if (len >= total) {
          this.scrollerObj.isEnd = true;
        }
      }
    },
    // toOrderDetail(order) {
    //   let orderData = JSON.stringify(order);
    //   uni.navigateTo({
    //     url: "/pagesA/order/detail?order=" + orderData,
    //   });
    // },
	// 滚动到底部触发的函数，加载下一页数据
	// 加载下一页，但limit不改变
    scrolltolower(e) {
      if (!this.scrollerObj.isEnd){
        this.query.offset++
        this.fetchData()
      }
    },
	// 滚动到顶部触发的函数，当做下拉刷新函数使用
	refreshState() {
		this.fetchData()
	},
       // 设置滑动框高度
    getScrollViewHeight() {
      return new Promise((resolve) => {
        let scroller = uni.createSelectorQuery().select('.scroller')
        if (scroller) {
          scroller.boundingClientRect(({height}) => {
            this.scrollerObj.height = height
            resolve()
          }).exec()
        }
      })
    },
  },
  onLoad(query){

    // uni.setStorageSync("isBack", 1);

  },
 onShow () {
    wx.pageScrollTo({
        scrollTop: 20,
        duration: 300,
        success:function(){
          console.log("pageScrollTo11")
        }
        })
    uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
     });
   
    let isBack = uni.getStorageSync('isBack')
    let f5 = uni.getStorageSync('f5')
    if(f5==0){
      uni.setStorageSync("f5", 1);
    }else {
      this.query= { offset: 1,limist: 10}
      this.fetchData().then(() => {
        this.getScrollViewHeight()
        if(this.list.length>10){
        this.list.splice(10,this.list.length)
      }
      })
    }
    if (isBack) {
      let newData = {}
      if (this.initData && typeof this.initData === 'function') {
        newData = { ...this.initData()}
      }

      Object.assign(this.$data, this.$options.data(), newData)      
      this.fetchData().then(() => {
        wx.removeStorageSync('isBack')
        this.getScrollViewHeight()
      })
      
    }
    this.topLocal=0 
      
  },
   onReady() {
  //  this.query= { offset: 1,limist: 10},
     this.getScrollViewHeight().then(() => {  
        this.fetchData().then(()=>{
         uni.setStorageSync("f5", 1);
        })
    })
     this.topLocal=0    
  },
     // 下拉刷新
  onPullDownRefresh () {
	this.fetchData()
    let newData = {}
    if (this.initData && typeof this.initData === 'function') {
      newData = { ...this.initData()}
    }
    Object.assign(this.$data, this.$options.data(), newData)
    this.fetchData().then(() => {
      this.getScrollViewHeight()
      wx.stopPullDownRefresh()
      $Message({
        content: '刷新成功',
        type: 'success',
        duration: 3
      })
    })
	setTimeout(() => {
	  uni.stopPullDownRefresh();
	}, 1500);
  },
  computed: {
    loadingTip() {
      return '-已显示所有-'
      // return this.scrollerObj.loading ? '' : '我也是有底线的~'
    }
  }
};
</script>

